<template>
	<view class="page-cont" :style="themeStore.theme">
		<view class="main-cont" :style="{height: pageCustomHeight}">
			<view class="header-cont" @click="handleProfile">
				<image class="header-logo" :src="userInfo.avatar"></image>
				<view class="header-info">
					<view class="header-username">{{userInfo.username}}</view>
					<view class="header-rolename">{{userInfo.roleName}}</view>
				</view>
			</view>
			<view class="menu-cont">
				<view class="menu-box">
					<view class="menu-item" v-for="(item, index) in menuList" :key="index"
						@click="handleMenuClick(item)">
						<view class="menu-item-box">
							<image class="menu-item-icon" :src="item.icon"></image>
							<text class="menu-item-title">{{item.name}}</text>
						</view>
						<view class="menu-item-box">
							<text v-if="item.value" class="menu-item-detail">{{item.value}}</text>
							<image class="menu-item-arrow" src="/static/right_arrow.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in themeList" :key="index"
					@click="handleThemeChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
		<!-- 绑定微信公众号 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="复制此链接粘贴到微信中进行绑定" v-model="wxUrl" placeholder="请输入内容"
				@confirm="handleCopy"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import { getWxUrl, getMessage } from '@/api/login.js';
	import useThemeStore from '@/store/theme';
	import useUserStore from '@/store/user';
	const themeStore = useThemeStore();
	const userStore = useUserStore();
	const { pageCustomHeight } = useNavbar();
	const { themeList } = storeToRefs(themeStore);
	const { userInfo } = storeToRefs(userStore);
	const popup = ref()
	const inputDialog = ref()
	const popType = ref(0)
	const isOpen = ref(false)
	const wxUrl = ref("")
	const menuList = ref([
		{
			name: "手机号",
			icon: "/static/mine_phone.png",
			path: "phone",
			value: "",
		},
		{
			name: "公众号",
			icon: "/static/mine_open.png",
			path: "wxpublic",
			value: "绑定公众号",
		},
		{
			name: "微信",
			icon: "/static/mine_wx.png",
			path: "wx",
			value: "",
		},
		{
			name: "密码",
			icon: "/static/mine_pw.png",
			path: "/pages/mine/password",
			value: "",
		},
		{
			name: "消息",
			icon: "/static/mine_sms.png",
			path: "/pages/mine/message",
			value: "",
		},
		{
			name: "版本",
			icon: "/static/mine_version.png",
			path: "version",
			value: "",
		},
		{
			name: "主题色",
			icon: "/static/mine_theme.png",
			path: "theme",
			value: "",
		},
	]);

	initData();
	function initData() {
		if (userInfo.value.mobile) {
			menuList.value[0].value = userInfo.value.mobile;
		} else {
			menuList.value[0].value = "绑定手机号";
		}
		menuList.value[5].value = wx.getAccountInfoSync().miniProgram.version // 小程序 版本号

		getWxAuthUrl();
		getUnReadMessage();
	}

	// 获取公众号绑定url
	function getWxAuthUrl() {
		let params = {
			type: 0,
			id: userInfo.value.id
		}
		getWxUrl(params).then(res => {
			wxUrl.value = res.data;
		});
	}

	function getUnReadMessage() {
		let params = {
			pageNum: 1,
			pageSize: 9999,
			status: 0
		};
		getMessage(params).then(res => {
			let pageData = res.pageData || {};
			menuList.value[4].value = pageData.total || 0;
		});
	}

	// 菜单点击
	function handleMenuClick(item) {
		if (item.path == "theme") {
			// 选择主题
			isOpen.value = true;
			popup.value.open();
			return;
		}
		if (item.path == "wxpublic") {
			if (wxUrl.value) {
				// 绑定微信公众号
				inputDialog.value.open();
			} else {
				getWxAuthUrl()
			}
			return;
		}
		if (item.path == "wx" || item.path == "version") {
			return;
		}
		if (item.path == "phone") {
			// 绑定手机号、修改手机号
			uni.navigateTo({
				url: userInfo.value.mobile ? '/pages/mine/phone-change' : '/pages/mine/phone-bind',
			});
			return;
		}
		uni.navigateTo({
			url: item.path,
		});
	}

	// 复制微信公众号url
	function handleCopy() {
		uni.setClipboardData({
			data: wxUrl.value,
			success: function (res) {
				uni.showToast({
					title: '复制成功',
				});
			}
		});
	}

	// 主题切换
	function handleThemeChange(item) {
		isOpen.value = false;
		popup.value.close();
		themeStore.setTheme(item.value);
		uni.reLaunch({
			url: '/pages/index/index'
		});
	}

	function handleProfile() {
		uni.navigateTo({
			url: '/pages/mine/profile',
		});
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			background: linear-gradient(135deg, rgba(229, 233, 246, 1) 0%, rgba(229, 240, 248, 1) 26.08%, rgba(230, 236, 249, 1) 72.48%, rgba(243, 249, 250, 1) 100%);
			overflow: hidden;
			overflow-y: auto;
		}

		.header-cont {
			padding: 90px 20px 30px;
			height: 180px;
			display: flex;
			box-sizing: border-box;

			.header-logo {
				width: 60px;
				height: 60px;
			}

			.header-info {
				margin-left: 10px;
			}

			.header-username {
				color: #333;
				font-size: 15px;
				font-weight: 600;
			}

			.header-rolename {
				margin-top: 10px;
				padding: 0 8px;
				height: 18px;
				line-height: 18px;
				display: inline-block;
				color: #5F83F9;
				border-radius: 9px;
				background-color: rgba(95, 131, 249, 0.1);
				border: 1px solid #5F83F9;
			}
		}

		.menu-cont {
			padding: 0 10px;
		}

		.menu-box {
			padding: 0 20px;
			border-radius: 10px;
			background-color: #fff;
		}

		.menu-item {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #DFDFDF;
			background-color: #fff;

			&:last-child {
				border: none;
			}
		}

		.menu-item-box {
			display: flex;
			align-items: center;
		}

		.menu-item-title {
			padding-left: 10px;
			color: #333;
			font-size: 14px;
		}

		.menu-item-detail {
			padding-right: 10px;
			color: $theme-color;
			font-size: 14px;
			font-weight: 600;
		}

		.menu-item-icon {
			width: 20px;
			height: 20px;
		}

		.menu-item-arrow {
			width: 14px;
			height: 14px;
		}
	}

	.popup-cont {
		background: #fff;
		max-height: 80vh;

		.popup-title,
		.popup-header {
			height: 100rpx;
			line-height: 100rpx;
			color: #333;
			font-size: 28rpx;
			text-align: center;
			border-top: 2rpx solid #eee;
		}

		.popup-header {
			font-size: 32rpx;
			font-weight: 600;
		}
	}
</style>